<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <div class="search-wrapper">
            <el-form :model="queryParams" ref="queryFormRef" inline>
                <el-form-item label="供应商名称" prop="nickname">
                    <el-input v-model="queryParams.nickname" placeholder="请输入供应商名称" clearable
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card class="box-card">
            <!-- 数据表格 -->
            <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="账号" min-width="100" align="center" prop="username" />
                <el-table-column label="供应商名称" min-width="100" align="center" prop="nickname" />
                <el-table-column label="手机号" min-width="100" align="center" prop="mobile" />
                <el-table-column label="企业资质" min-width="100" align="center" prop="qyzz" />
                <el-table-column label="评级" min-width="100" align="center" prop="pj" />
                <el-table-column label="附件" min-width="100" align="center" prop="fj">
                    <template #default="scope">
                        <el-button v-if="scope.row.fj" type="text"
                            @click="handlePreviewImages(scope.row.fj.split(','))">
                            查看
                        </el-button>
                        <span v-else>暂无附件</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" min-width="100" align="center" prop="status" >
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 0" type="info">未激活</el-tag>
                        <el-tag v-else-if="scope.row.status === 1" type="success">激活</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="150" align="center">
                    <template #default="scope">
                        <el-button type="primary" link icon="Edit" @click="activation(scope.row)">激活</el-button>
                        <el-button type="primary" link @click="openRatingDialog(scope.row)">评级</el-button>
                        <el-button type="danger" link @click="delect(scope.row)">退回</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页工具栏 -->
            <div class="pagination-container">
                <el-pagination background v-model:current-page="queryParams.pageNum"
                    v-model:page-size="queryParams.pageSize" :page-sizes="[10, 20, 30, 50]" :total="total"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>

            <!-- 图片预览对话框 -->
            <el-dialog v-model="previewDialogVisible" title="图片预览" width="60%" :append-to-body="true">
                <el-carousel v-if="previewImageUrls.length > 0" height="400px">
                    <el-carousel-item v-for="(url, index) in previewImageUrls" :key="index">
                        <el-image :src="url" style="width: 100%; height: 100%; object-fit: contain;" fit="contain" />
                    </el-carousel-item>
                </el-carousel>
                <div v-else>暂无图片</div>
            </el-dialog>

            <el-dialog title="设置评级" v-model="ratingDialogVisible" width="30%">
                <el-form :model="ratingForm" ref="ratingFormRef" label-width="80px">
                    <el-form-item label="评级" prop="pj">
                        <el-select v-model="ratingForm.pj" placeholder="请选择评级">
                            <el-option label="A" value="A" />
                            <el-option label="B" value="B" />
                            <el-option label="C" value="C" />
                            <el-option label="D" value="D" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="ratingDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitRating">确定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { getUserListApi, updateGysJh, updateUserApi, deleteUserApi } from '@/api/system/user';

// 状态管理
const loading = ref(true);
const total = ref(0);
const dataList = ref([]);
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    nickname: ''
});
const queryFormRef = ref();
const previewDialogVisible = ref(false);
const previewImageUrls = ref<string[]>([]);
const ratingDialogVisible = ref(false); // 控制评级弹窗的显示
const ratingForm = ref({

});
const ratingFormRef = ref();

/** 查询列表 */
const getList = () => {
    loading.value = true;
    const obj = {
        ...queryParams,
        userRoleId:20
    }
    getUserListApi(queryParams).then(response => {
        dataList.value = response.data.records.filter((item:any) => JSON.stringify(item.roleIds) =='[20]');
        total.value = response.data.total;
        loading.value = false;
    });
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: { id: any }[]) => {
    // 可扩展逻辑
};

/** 分页操作 */
const handleSizeChange = (val: number) => {
    queryParams.pageSize = val;
    getList();
};

const handleCurrentChange = (val: number) => {
    queryParams.pageNum = val;
    getList();
};

/** 预览图片（支持多个） */
const handlePreviewImages = (imageUrls: string[]) => {
    if (!imageUrls || imageUrls.length === 0) {
        ElMessage.warning('暂无图片可预览');
        return;
    }
    previewImageUrls.value = imageUrls;
    previewDialogVisible.value = true;
};

/** 激活供应商 */
const activation = (row: any) => {
    ElMessageBox.confirm(`是否确认激活供应商: "${row.nickname}" 的账号?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        updateGysJh(row).then(() => {
            ElMessage.success('激活成功');
            getList();
        });
    });
};

/** 打开评级弹窗 */
const openRatingDialog = (row) => {
    ratingForm.value = row
    ratingDialogVisible.value = true;
};

/** 提交评级 */
const submitRating = () => {
    if (!ratingForm.value.pj) {
        ElMessage.error('请选择评级');
        return;
    }
    const obj = {
        roleIds:ratingForm.value.roleIds,
        user:{
            ...ratingForm.value
        }
    }
    updateUserApi(obj).then(() => {
        ElMessage.success('评级设置成功');
        ratingDialogVisible.value = false;
        ratingForm.value = {};
        getList(); // 刷新列表
    });
}
/**退回 */
const delect = (row) => {
    ElMessageBox.confirm('是否确认退回?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteUserApi(row.id).then(() => {
            ElMessage.success('退回成功');
            getList();
        });
    });
};
// 初始化加载数据
onMounted(() => {
    getList();
});
</script>
